<template>
  <div class="positionList">
    <ul class="hot_pos reset" v-if="jobList.length">
      <li class="clearfix" v-for="(item,index) in jobList" :key="index">
        <div class="hot_pos_l">
          <div class="mb10">
            <a
              @click="navigateJobItem(item.job_id)"
            >{{item.job_title != '' ? item.job_title : item.position_title }}</a>
            <span class="c9">{{item.area_name}}</span>
          </div>
          <span>
            <em class="c7">薪资：</em>
            <span
              v-if="item.salary_unit != 4"
            >{{item.salary_min}}-{{item.salary_max}} {{salaryUnit(item.salary_unit)}}</span>
            <span v-else>面议</span>
          </span>
          <span>
            <em class="c7">经验：</em>
            <span
              v-if="item.job_experience_min == item.job_experience_max && item.job_experience_max == 0"
            >经验不限</span>
            <span
              v-else-if="item.job_experience_min == item.job_experience_max && item.job_experience_max != 0"
            >{{item.job_experience_max}}年</span>
            <span
              v-else-if="item.job_experience_min != item.job_experience_max"
            >{{item.job_experience_min}}-{{item.job_experience_max}}年</span>
            <span v-else>经验不限</span>
          </span>
          <br />
          <span>
            <em class="c7">最低学历：</em>
            {{educationArr(item.job_education)}}
          </span>
          <span>
            <em class="c7">性别：</em>
            {{genderArr(item.gender)}}
          </span>
          <br />
        </div>
        <div class="hot_pos_r">
          <div class="apply">
            <a href="javascript:void(0)" @click="applyJob">投个简历</a>
          </div>
          <div class="mb10">
            <a>{{item.company.title}}</a>
          </div>
          <span>
            <em class="c7">地址：</em>
            {{item.company.address}}
          </span>
          <br />
          <ul v-if="item.tag.length" class="companyTags reset">
            <li
              class="clearfix"
              v-for="(tag,index) in item.tag"
              :key="index"
              v-if="index < 4"
            >{{jobTag(Number(tag.tag_type)-1)}}</li>
          </ul>
          <br v-if="item.tag.length" />
          <span>
            <em class="c7">发布时间：</em>
            {{transDate(item.time_update) || item.time_update}}
          </span>
        </div>
      </li>
    </ul>
    <PhoneModal :info="phoneModalInfo"></PhoneModal>
  </div>
</template>

<script>
import { getSalaryUnit, getJobTag } from "~/common/js/util.js";
import PhoneModal from "~/components/phoneModal/phoneModal";

export default {
  name: "positionList",
  props: {
    jobList: Array,
    default: []
  },
  data() {
    return {
      phoneModalInfo: {
        title: "投递简历",
        content: "扫一扫投递，手机操作更便捷"
      }
    };
  },
  components: { PhoneModal },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    console.log(this.jobList, "123123");
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroy() {},
  methods: {
    applyJob() {
      this.$store.dispatch("changePhoneModal", true);
    },
    navigateJobItem(jobId) {
      this.$router.push({
        name: "positionDetail",
        query: { job_id: jobId }
      });
    },
    salaryUnit(type) {
      return getSalaryUnit(type);
    },
    jobTag(index) {
      return getJobTag(index);
    },
    educationArr(index) {
      return [
        "学历不限",
        "小学",
        "初中",
        "中专",
        "高中",
        "大学专科",
        "大学本科",
        "硕士",
        "博士",
        "博士后",
        "其它"
      ][index];
    },
    genderArr(index) {
      return ["男女不限", "男", "女"][index];
    },
    transDate(str = "") {
      try {
        str = str.split("-");
        return str[1] + "月" + str[2].split(" ")[0] + "日";
      } catch (error) {
        return "";
      }
    }
  }
};
</script>

<style scoped lang="less">
@import "./../../public/less/main.less";
</style>
